<template>
    <div class="underWrite-wrap">
      <dheader></dheader>
      <!-- offer-step-1 -->
      <div class="dh-container">
        <div class="offer-header cp-offer">
          <h2>
            <strong>{{params.plateNo}}</strong>
            <strong><i class="layui-icon layui-icon-location"></i>{{params.cityName}}</strong>
          </h2>
          <div class="offer-plan-info">
            <div class="info-item">
              <strong>险种选择</strong><span>(已选{{prevParam.insuranceListNums}}种)</span>
            </div>
            <div class="info-item">
              <strong>生效日期</strong>
              <div class="date-limit">
                <p>交强险: {{prevParam.jqQbTime}}</p>
                <p>商业险: {{prevParam.syQbTime}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="offer-form">
          <form class="layui-form" action="">
            <div class="layui-row form-row write-form">
              <div class="layui-col-md6">
                <div class="offer-form-left">
                  <div class="layui-form-item">
                    <label class="layui-form-label block-label">被保人 (车主)</label>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">姓名/单位名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="insuredName" v-model="uwParams.insuredName" lay-verify="required" autocomplete="off" placeholder="输入名称" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">身份证/组织机构代码</label>
                    <div class="layui-input-block">
                      <input type="text" name="insuredIdCard" v-model="uwParams.insuredIdCard" lay-verify="required" autocomplete="off" placeholder="输入名称" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label block-label">投保人</label>
                    <div class="layui-input-block block-label">
                    <div class="layui-input-inline offer-tip">
                    <span>投保人同被保人</span>
                      <input type="checkbox" name="close" lay-skin="switch" lay-text="是|否">
                    </div>
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="!samePerson">
                    <label class="layui-form-label">姓名/单位名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="customerName" v-model="uwParams.customerName" lay-verify="required" autocomplete="off" placeholder="输入名称" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="!samePerson">
                    <label class="layui-form-label">身份证/组织机构代码</label>
                    <div class="layui-input-block">
                      <input type="text" name="customerIdCard" v-model="uwParams.customerIdCard" lay-verify="required" autocomplete="off" placeholder="输入名称" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="!samePerson">
                    <label class="layui-form-label">投保人电话</label>
                    <div class="layui-input-block">
                      <input type="text" name="customerPhone" maxlength="11" v-model="uwParams.customerPhone" lay-verify="phone" autocomplete="off" placeholder="输入电话" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label block-label">发票信息（增值税普票）</label>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">发票抬头</label>
                    <div class="layui-input-block">
                      <input type="text" name="invoiceInfo" v-model="uwParams.invoiceInfo" lay-verify="required" autocomplete="off" placeholder="输入名称" class="layui-input">
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="offer-form-right">
                  <div class="layui-form-item">
                    <label class="layui-form-label block-label">保单</label>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">形式</label>
                    <div class="layui-input-block">
                      <input type="radio" lay-filter="material" name="material" value="2" title="纸质" checked="checked">
                      <input type="radio" lay-filter="material" name="material" value="1" title="电子">
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="haveInvoice">
                    <label class="layui-form-label">收件人姓名</label>
                    <div class="layui-input-block">
                      <input type="text" name="contactName" v-model="uwParams.contactName" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="haveInvoice">
                    <label class="layui-form-label">联系方式</label>
                    <div class="layui-input-block">
                      <input type="text" name="contactPhone" maxlength="11" v-model="uwParams.contactPhone" lay-verify="phone" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="haveInvoice">
                    <label class="layui-form-label">邮箱地址</label>
                    <div class="layui-input-block">
                      <input type="text" name="contactEmail" v-model="uwParams.contactEmail" lay-verify="email" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item" v-if="haveInvoice">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                      <input type="text" name="contactAddress" v-model="uwParams.contactAddress" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label block-label">证件资料照片</label>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block newline">
                      <div class="imgBtn" v-for="(item, index) in thumbArr" :key="`${index}_pic`"><img :src="`http://ccchong-isv.oss-cn-qingdao.aliyuncs.com/dhbx/${item.img}`" v-if="item.img"><i v-else class="layui-icon layui-icon-loading"></i></div>
                      <ImgUpload
                        class="imgBtn"
                        ref="upload"
                        extensions="gif,jpg,jpeg,png,webp"
                        accept="image/png,image/gif,image/jpeg,image/webp"
                        :size="1024 * 1024 * 10"
                        v-model="files"
                        post-action="/ud/uploadFile.do?resultFlag=2"
                        @input-filter="inputFilter"
                        @input-file="inputFile"
                      >
                        <i class="layui-icon layui-icon-camera"></i>
                      </ImgUpload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-form-item submit-btn step-btn">
              <button type="button" @click.prevent.stop="goBack" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal goback">上一步</button>
              <button lay-submit="" disabled="disabled" lay-filter="last"  class="layui-btn layui-btn-lg layui-btn-radius layui-btn-disabled" id="btn-disabled">提交核保</button>
            </div>
          </form>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import dheader from './header';
  import { addOrder } from '../mock/mock';
  import mockHandler from '../mock/handler';
  import Functools from '../utils/functionTools';
  import ImgUpload from 'vue-upload-component';
  import {UD_PATH} from '../utils/dispatchEnv';
  export default {
    name: 'underWrite',
    data () {
      return {
        identity: Functools.getSession('identity'),
        params: Functools.getSession('param'),
        prevParam: {
          insuranceListNums: '--',
          jqQbTime: '--',
          syQbTime: '--'
        },
        haveInvoice: !0,
        samePerson: !1,
        uwParams: {},
        files: [],
        uploadUrl: `${UD_PATH}/uploadFile.do`,
        thumbArr: [],
        uploadIndex: 0,
        uploadAble: !0
      };
    },
    mounted () {
      this.prevParam = this.$route.query;
      this.initialParam();
      const layui = window.layui;
      const that = this;
      layui.use(['form', 'layer'], function () {
        const [form, layer] = [layui.form, layui.layer];
        const $ = layui.jquery;

        form.on('switch', function (data) {
          that.samePerson = data.elem.checked;
          // that.haveInvoice && that.params.transferTime && (delete that.params.transferTime);
          if (that.samePerson) {
            that.uwParams.customerName = that.uwParams.insuredName;
            that.uwParams.customerPhone = that.uwParams.insuredPhone;
            that.uwParams.customerIdCard = that.uwParams.insuredIdCard;
          } else {
            that.uwParams.customerName = '';
            that.uwParams.customerPhone = '';
            that.uwParams.customerIdCard = '';
          }
        });

        form.on('radio(material)', function (data) {
          that.haveInvoice = data.value === '2' ? !0 : !1;
          if (!that.haveInvoice) {
            that.uwParams.contactName = '';
            that.uwParams.contactPhone = '';
            that.uwParams.contactAddress = '';
            that.uwParams.policyType = '1';
          } else {
            that.uwParams.policyType = '2';
          }
        });

        form.on('submit(last)', function () {
          that.samePerson && (that.uwParams.customerIdCard = that.uwParams.insuredIdCard);
          that.goNext(layer);
          return false;
        });

        form.render();
      });
    },
    methods: {
      initialParam () {
        this.uwParams.insuredName = this.params.name;
        this.uwParams.insuredPhone = this.params.phone;
        this.uwParams.phone = this.params.phone;
        this.uwParams.enquiryId = this.prevParam.id;
        this.uwParams.offerId = this.prevParam.offerId;
        this.uwParams.policyType = '2';
      },
      goBack () {
        this.$router.back();
      },
      goNext (layer) {
        console.log(this.uwParams);
        this.addUw().then((res) => {
          console.log(res);
          if (res.code === 'success') {
            // this.$router.push({
            //   path: 'prepay'
            // });
          } else {
            layer.alert(res.text);
          }
        });
      },
      addUw () {
        return mockHandler(addOrder, Object.assign(this.identity, this.uwParams));
      },
      inputFilter (newFile, oldFile, prevent) {
        if (newFile && !oldFile) {
          // Before adding a file
          // 添加文件前
          // Filter system files or hide files
          // 过滤系统文件 和隐藏文件
          if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
            return prevent()
          }
          // Filter php html js file
          // 过滤 php html js 文件
          if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
            return prevent()
          }
        }
      },
      inputFile (newFile, oldFile) {
        if (newFile && !oldFile && this.uploadAble) {
          // add
          this.$refs.upload.active = !0;
          this.thumbArr.push({
            img: ''
          });
          this.uploadAble = !1;
        }
        if (newFile && oldFile) {
          // update
          if (this.$refs.upload.uploaded) {
            const newThumbarr = [...this.thumbArr];
            newThumbarr[this.uploadIndex].img = '123.png';
            this.thumbArr = newThumbarr;
            console.log(this.thumbArr);
            this.uploadIndex++;
            this.uploadAble = !0;
          }
        }
        if (!newFile && oldFile) {
          // remove
          console.log('remove', oldFile)
        }
      }
    },
    components: {
      dheader,
      ImgUpload
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
  #btn-disabled
    background-color #c9c9c9
    color #fff
    box-shadow 0 2px 4px 4px rgba(0, 0, 0, 0.1)

.write-form
  padding-bottom 30px
  .block-label
    font-size 16px
    color #fa8d2e
    & span
      color #000
      font-size 14px
    .layui-form-switch
      margin-top 0
      & em
        top -2px
    .layui-form-onswitch
      border-color: #fa8d2e;
      background-color: #fa8d2e;

  .imgBtn
    width 96px
    height 96px
    border-radius 10px
    border 2px dashed #e5e5e5
    background-color #fafafa
    cursor pointer
    text-align center
    line-height 96px
    float left
    margin-right 10px
    & i
      font-size 30px
      color #e5e5e5
</style>
